<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务管理</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <div class="container">
        <div class="quadrant" id="quadrant1">
            <h2>重要且紧急</h2>
            <ul class="task-list" id="list1"></ul>
        </div>
        <div class="quadrant" id="quadrant2">
            <h2>重要不紧急</h2>
            <ul class="task-list" id="list2"></ul>
        </div>
        <div class="quadrant" id="quadrant3">
            <h2>紧急不重要</h2>
            <ul class="task-list" id="list3"></ul>
        </div>
        <div class="quadrant" id="quadrant4">
            <h2>不紧急不重要</h2>
            <ul class="task-list" id="list4"></ul>
        </div>
    </div>

    <!-- 添加任务按钮 -->
    <button id="add-task-button" class="add-task-button">+ 添加任务</button>

    <!-- 隐藏/显示已完成任务按钮 -->
    <button id="toggle-completed-tasks" class="toggle-completed-button">隐藏已完成任务</button>

    <!-- 添加任务模态框 -->
    <div id="task-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>添加任务</h2>
            <form id="task-form">
                <label for="task-name">任务名称:</label>
                <input type="text" id="task-name" name="task-name" required>

                <label for="due-date">截止时间:</label>
                <input type="date" id="due-date" name="due-date" required>

                <label for="task-tag">任务标签:</label>
                <input type="text" id="task-tag" name="task-tag" required>

                <label for="task-quadrant">任务象限:</label>
                <select id="task-quadrant" name="task-quadrant" required>
                    <option value="重要且紧急">重要且紧急</option>
                    <option value="重要不紧急">重要不紧急</option>
                    <option value="紧急不重要">紧急不重要</option>
                    <option value="不紧急不重要">不紧急不重要</option>
                </select>

                <button type="submit">添加</button>
            </form>
        </div>
    </div>

    <!-- 编辑任务模态框 -->
    <div id="edit-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>编辑任务</h2>
            <form id="edit-task-form">
                <label for="edit-task-name">任务名称:</label>
                <input type="text" id="edit-task-name" name="edit-task-name" required>

                <label for="edit-due-date">截止时间:</label>
                <input type="date" id="edit-due-date" name="edit-due-date" required>

                <label for="edit-task-tag">任务标签:</label>
                <input type="text" id="edit-task-tag" name="edit-task-tag" required>

                <label for="edit-task-quadrant">任务象限:</label>
                <select id="edit-task-quadrant" name="edit-task-quadrant" required>
                    <option value="重要且紧急">重要且紧急</option>
                    <option value="重要不紧急">重要不紧急</option>
                    <option value="紧急不重要">紧急不重要</option>
                    <option value="不紧急不重要">不紧急不重要</option>
                </select>

                <button type="submit">保存</button>
            </form>
        </div>
    </div>

    <script src="/script.js"></script>
</body>
</html>